import React from 'react';
import { Carousel } from 'antd-mobile';

import styles from './pictureCarousel.css';

class PictureCarousel extends React.Component {

  state = {
    data: '',
    initialHeight: 100,
  }

  componentDidMount() {

    // setTimeout(() => {
      this.setState({
        data: this.props.list,
      });
    // }, 100);
  }

  clickADImg(targetUrl){
    console.log(targetUrl);
  }

  render() {
    const {data} = this.state;
    const hProp = this.state.initialHeight ? { height: this.state.initialHeight } : {};
    return (

      <div>
        {data.length > 0 ? (
          <Carousel
            className={styles.myCarousel}
            autoplay={data.length > 1 ? true : false}
            infinite
            selectedIndex={0}
            swipeSpeed={35}
            beforeChange={(from, to) => {}}
            afterChange={index => {}}
          >
            {data.map(ii => (
              <a key={ii} style={hProp}
                onClick={() => this.clickADImg(ii.targetUrl)}
                >
                <img
                  src={ii.image}
                  alt="icon"
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({
                      initialHeight: null,
                    });
                  }}
                />
              </a>
            ))}
          </Carousel>
        ):''}
      </div>

    );
  }
}

export default PictureCarousel;
